<template>
    <div class="material page">
        <formHeader :title="'爆款素材'" newColor></formHeader>
        <div class="topCon">
            <div class="search">
                <input class="input" v-model="value" placeholder="请输入产品名搜索"/>
                <div class="searchBtn" @click="search">搜索</div>
                <img src="./image/search.png" alt="">
            </div>
            <div class="myMaterial" @click="toMyMaterial">
                <div>我的素材</div>
                <img src="./image/my.png">
            </div>
        </div>
        <cube-scroll
                ref="scroll"
                :options="options"
                class="scroll"
                @pulling-up="getMaterialList()"
        >
            <div class="items">
                <div class="item" v-for="(item,index) in list" :key="item.id+'s'+index">
                    <div class="shop" v-if="item.shopEntity" @click="toShop(item.shopEntity.userId)">
                        <img :src="imgH+item.shopEntity.avatar" alt="">
                        <div class="msg">
                            <div class="shopName">{{item.shopEntity.name}}</div>
                            <div class="shopDetail">{{item.time}}</div>
                        </div>
                        <div class="btn" @click.stop="toHistory(item.shopId)">历史素材</div>
                    </div>
                    <div class="content" :class="{bey:!item.showWord}" @click="showMoreWord(index)">{{item.content}}
                        <span class="copyContent" :data-clipboard-text="item.content" @click="copy">复制</span>
                    </div>
                    <div class="imgBox">
                        <img :src="imgH+imgItem" alt="" v-for="(imgItem,index) in item.img.split(',').filter(item=>item)" :key="index"
                             @click="showImagePreview(item.img,index)">
                    </div>
                    <div class="discuss" v-if="item.comments">
                        <div class="title">消费者评论</div>
                        <cube-slide ref="slide" :showDots="false">
                            <cube-slide-item v-for="(disItem,index) in item.comments" :key="index">
                                <div class="disItem">
                                    <img :src="disItem.avatar" alt="">
                                    <div class="word">{{disItem.content}}</div>
                                </div>
                            </cube-slide-item>
                        </cube-slide>
                    </div>
                    <div class="goods" @click="toGoods(item.goodsId)">
                        <img :src="imgH+item.goodsImg" alt="">
                        <div class="goodsCon">
                            <div class="goodsName">{{item.goodsName}}</div>
                            <div class="price">¥{{item.goodsPrice}}</div>
                        </div>
                        <div class="toGoods">
                            <i class="cubeic-arrow"></i>
                        </div>
                    </div>
                </div>
            </div>
        </cube-scroll>
        <img src="./image/release.png" alt="" class="toRelease" @click="toRelease">
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {getMaterialList} from '@/api/material'
    import ClipboardJS from 'clipboard'
    import * as Dialog from '@/dialog'
    export default {
        name: "material",
        components: {formHeader},
        data() {
            return {
                value: '',
                imgH: 'http://images.zmzpl.com/',
                options: {
                    pullUpLoad: true
                },
                showMore: true,
                page: 1,
                shopId: '',
                goodsName: '',
                list: [],
                message: ''
            }
        },
        methods: {
            copy() {
                var clipboard =  new ClipboardJS('.copyContent');
                clipboard.on('success', function(e) {
                    e.clearSelection()
                    Dialog.showCorrect("复制成功!")
                })
            },
            getMaterialList() {
                getMaterialList(this.page, this.shopId, this.goodsName).then(res => {
                    let list = res.data.map(item => {
                        this.$set(item, 'showWord', false)
                        return item
                    })
                    if (this.page == 1) {
                        this.list = list
                    } else {
                        this.list = this.list.concat(list)
                    }
                    this.page++
                    this.$nextTick(() => {
                        this.$refs.scroll.refresh()
                        this.$refs.scroll.forceUpdate(true, true)
                    })
                })

            },
            showMoreWord(index) {
                this.list[index].showWord = !this.list[index].showWord
            },
            search() {
                if (!this.value) {
                    this.value = ''
                }
                this.goodsName = this.value
                this.page = 1
                this.getMaterialList()
                this.$refs.scroll.forceUpdate(true, true)
            },
            toHistory(id) {
                this.$router.push({
                    path: '/material/history?id=' + id
                })
            },
            toMyMaterial(){
                this.$router.push({
                    path: '/material/history?type=1'
                })
            },
            toRelease() {
                this.$router.push({
                    path: '/material/release'
                })
            },
            toGoods(id) {
                this.$router.push({
                    path: '/detail?id=' + id
                })
            },
            toShop(id) {
                if (!id) {
                    id = 0
                }
                this.$router.push({
                    path: '/shop/list?uid=' + id
                })
            },
            showImagePreview(item, index) {
                let Img = item.split(',').map(img => {
                    return this.imgH + img
                })
                this.initialIndex = index
                const params = {
                    $props: {
                        imgs: Img,
                        initialIndex: 'initialIndex', // 响应式数据的key名
                        loop: false,
                        preventDefault: false
                    },
                    $events: {
                        change: (i) => {
                            // 必须更新 initialIndex
                            this.initialIndex = i
                        }
                    }
                }
                this.$createImagePreview({...params}).show()
            }
        },
        mounted() {
            this.value = ''
            this.getMaterialList()

        }
    }
</script>

<style scoped lang="stylus">
    .material
        background-color: #f5f5f5
        height 100%
        position relative

        .toRelease
            width: 60px
            height: 60px
            position fixed
            right 18px
            bottom 100px
            z-index 888

        .topCon
            margin-top 47px
            padding 8px 13px
            display flex
            justify-content space-between
            .myMaterial
                width 100px
                font-size 13px
                margin-left 6px
                height 30px
                padding 0 10px
                border 1px solid #00d6c0
                border-radius 15px
                color #00d6c0
                display flex
                justify-content space-between
                align-items center
                img
                    width 20px
                    height 20px


            .search
                background-color: #fff;
                width 245px
                height 30px
                border 1px solid #d5dbdb
                border-radius 15px
                display flex
                justify-content space-between
                position relative

                .input
                    width 160px
                    border-radius 15px 0 0 15px
                    outline none
                    padding-left 32px
                    font-size 14px

                .searchBtn
                    width 60px
                    font-size 14px
                    color #f7ffff
                    background-color: #00d6c0
                    border-radius 15px
                    line-height 30px
                    text-align center

                img
                    width: 13px
                    height: 13px
                    position absolute
                    top 8px
                    left 12px

        .scroll
            height 100%

            .items
                padding 10px 13px

            .item
                background-color: #fff
                padding 10px
                border-radius 8px
                margin-bottom 10px
                -webkit-user-select: text;

                .shop
                    display flex
                    align-items center
                    height 40px

                    img
                        width: 30px
                        height: 30px
                        border-radius 50%

                    .msg
                        flex 1
                        margin 0 10px

                        .shopName
                            color #333737
                            font-size 16px
                            line-height 22px
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;

                        .shopDetail
                            color #b6b9bb
                            font-size 12px
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                            line-height 17px
                            width 70px

                        .shopTime
                            color #b6b9bb
                            line-height 17px
                            font-size 12px

                    .btn
                        width 60px
                        height 24px
                        border-radius 12.2px
                        border 1px solid #00D6c0
                        font-size 12px
                        line-height 24px
                        text-align center
                        color #00D6c0

                .content
                    margin-top 10px
                    font-size 14px
                    color #676d6c
                    line-height 20px
                    -webkit-user-select text
                    -moz-user-select text
                    -ms-user-select text
                    user-select text
                    width 200px
                    .more
                        color #00D6c0
                    span
                        color: #ccc;
                        font-size 12px
                        white-space nowrap
                .bey
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    line-clamp: 5;
                    -webkit-box-orient: vertical;

                .imgBox
                    display flex
                    flex-wrap wrap
                    margin-top 10px

                    img
                        width: 107px
                        height: 107px
                        margin-bottom 8px
                        object-fit:cover

                    > :nth-child(2)
                        margin 0 4px

                    > :nth-child(5)
                        margin 0 4px

                    > :nth-child(8)
                        margin 0 4px

                .discuss
                    background-color: #fff7de
                    border-radius 8px
                    padding 5px 10px
                    margin-top 10px

                    .title
                        color #333737
                        font-size 11px

                    .disItem
                        display flex
                        margin-top 5px

                        img
                            width: 20px
                            height: 20px
                            border-radius 50%

                        .word
                            margin-left 5px
                            width 280px
                            line-height 16px
                            color #b6b7bb
                            font-size 11px
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;


                .goods
                    background-color: #f8f8f8
                    height 48px
                    align-items center
                    display flex
                    margin-top 10px

                    img
                        width 48px
                        height 48px

                    .goodsCon
                        flex 1
                        margin 0 10px

                        .goodsName
                            color #676d6c
                            width 220px
                            font-size 14px
                            line-height 20px
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            word-break: break-all;

                        .price
                            font-size 15px
                            color #00d6c0

                    .toGoods
                        font-size 13px
                        color #676d6c

</style>
